<template id='ByToken'>
  <div class="ByToken">
    <top-bar :isClick="isClick" />
    <div class="main">
      <div class="title">
        <div class="titleBlueText"></div>
        <div class="titleText"></div>
        <div class="desc">{{ desc }}</div>
      </div>
      <div class="game">
        <div class="gameItem" v-for="(item, index) in gameList" :key="index">
          <b-img :src="item.icon" fluid></b-img>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
export default {
  name: "ByToken",
  components: { TopBar, BottomBar },
  data() {
    return {
      isClick: -1,
      gameList: [
        { icon: require("../../assets/images/byToken/game1.png") },
        { icon: require("../../assets/images/byToken/game2.png") },
        { icon: require("../../assets/images/byToken/game3.png") },
      ],
      desc: "Stand-alone Chains Accelerate Game Ecology Middleware Energizes the Reform of Chain Game",
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.ByToken {
  background-color: #000;
  user-select: none;
  padding-top: 128px;
  // height: 100%;
  // padding-bottom: 626px;
  .main {
    .title {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      margin-top: 59px;
      .titleBlueText {
        background: url("../../assets/images/byToken/byToken.png");
        background-size: 100% 100%;
        width: 678px;
        height: 166px;
      }
      .titleText {
        background: url("../../assets/images/byToken/title.png");
        background-size: 100% 100%;
        width: 1137px;
        height: 160px;
        margin: 58px;
      }
      .desc {
        padding: 0 660px;
        font-size: 26px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        margin-bottom: 67px;
      }
    }
    .game {
      display: flex;
      flex-direction: column;
      justify-self: center;
      align-items: center;
      margin-bottom: 180px;
      .gameItem {
        margin-bottom: 32px;
        border-radius: 65px;
        background: #ffffff;
        width: 730px;
        height: 79px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 249px;
          height: 61px;
        }
      }
      .gameItem:first-child {
        -webkit-box-shadow: 0px 3px 34px #438dee;
        // -webkit-animation: pulsate-bck 2s ease-in-out infinite both;
        // animation: pulsate-bck 2s ease-in-out infinite both;
        // @-webkit-keyframes pulsate-bck {
        //   0%,
        //   100% {
        //     -webkit-box-shadow: 0px 3px 34px #438dee;
        //     box-shadow: 0px 3px 34px #438dee;
        //   }
        //   50% {
        //     -webkit-box-shadow: 0px 3px 34px #000;
        //     box-shadow: 0px 3px 34px #000;
        //   }
        // }
        // @keyframes pulsate-bck {
        //   0%,
        //   100% {
        //     -webkit-box-shadow: 0px 3px 34px #438dee;
        //     box-shadow: 0px 3px 34px #438dee;
        //   }
        //   50% {
        //     -webkit-box-shadow: 0px 3px 34px #000;
        //     box-shadow: 0px 3px 34px #000;
        //   }
        // }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .ByToken {
    height: auto;
    .main {
      padding: 0 40px;
      .title {
        .titleBlueText {
          width: 452px;
          height: 110px;
        }
        .titleText {
          width: 758px;
          height: 106px;
          margin-bottom: 87px;
        }
        .desc {
          padding: 0;
          margin-bottom: 87px;
        }
      }
      .game {
        padding-bottom: 187px;
        margin-bottom: 0;
      }
    }
  }
}
</style>
